<template>
	<picker :value="index" range-key="label" :range="list" @change="bindPickerChange">
		<view class="uni-input content-c">
			<text v-if="index > -1">
				{{list[index].label}}
			</text>
			<text class="tips-text" v-else>
				请选择
			</text>
			<text v-if="rightIcon" class="new-iconfont icon-arrow-right"></text>
		</view>
	</picker>
</template>

<script>
	export default {
		props: {
			value: {
				default () {
					return ''
				}
			},
			list: {
				type: Array,
				default () {
					return []
				}
			},
			rightIcon: {
				type: Boolean,
				default () {
					return false
				}
			}
		},
		data() {
			return {
				index: -1
			}
		},
		mounted() {
			// 在组件挂载后，根据传入的值（value），设置选中项的索引（index）
			console.log(this.value);
			for (let i = 0; i < this.list.length; i++) {
				if (this.list[i].key == this.value) {
					this.index = i
					return true
				}
			}
		},
		watch: {
			 // 监听 value 变化，更新选中项的索引（index）
			value(val) {
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].key === val) {
						this.index = i
						return true
					}
				}
			}
		},
		methods: {
			// picker 的 change 事件处理函数
			bindPickerChange(e) {
				this.index = e.target.value
				// 触发父组件的 input 事件，传递选中项的值
				this.$emit('input', this.list[this.index].key)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tips-text {
		color: #888;
	}
	.icon-arrow-right {
		font-size: 40rpx;
		color: #aaa;
		position: relative;
		top: 6rpx;
	}
</style>
